import React from "react";
import ReactDom from "react-dom";
// BrowserRouter 可以自动感知 path 的变化
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { routes } from "../routes";
import { Provider } from "react-redux";
import { getClientStore } from "../store";
import { Header } from "../components/Header";
import { renderRoutes } from "react-router-config";

// console.log("fuck");

const store = getClientStore()

export const App = (props) => {
  console.log(props);
  return <Provider store={store}>
    <BrowserRouter>
      <Header />
      <Switch>
        {/* {renderRoutes(routes)} */}
        {routes.map((route) => {
          return <Route {...route} key={`Route_${route.path}`} />
        })}
      </Switch>
    </BrowserRouter>
  </Provider>
}


// 服务器渲染只发生在第一次进入到页面的时候，一旦加载完成之后，
// 之后就是前端 history 接管前端路由页面
// ReactDom.render(<Home />, document.body)
ReactDom.hydrate(<App />, document.getElementById("root"))

// 将 client 端进行 webpack 打包放到 public 下
console.log("public")

// 在同构项目中引入 redux；
// 在 server 端也要引入 redux;

// 优化 SEO；title 和 description

// 使用预渲染的 SEO 优化： prerender 来解决 SEO 的问题；